<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
</head>
<body>
    <div id="app">
        <div>
            姓名:<input type="text" v-model.trim.lazy="userinfo.name">
        </div>
       <div>
            密码:<input type="password" v-model.number="userinfo.pwd">
       </div>
       <div>
            性别:<input type="radio" v-model="userinfo.sex" value="male">男
            <input type="radio" v-model="userinfo.sex" value="female">女
       </div>
        <div>
            爱好:<input type="checkbox" v-model="userinfo.hobby" value="敲代码">敲代码
            <input type="checkbox" v-model="userinfo.hobby" value="睡觉">睡觉
            <input type="checkbox" v-model="userinfo.hobby" value="玩游戏">玩游戏
            
        </div>
        <div>
            所属省:<select v-model="userinfo.province">
                <option value="BJ">北京</option>
                <option value="HN">湖南</option>
                <option value="SH">上海</option>
                <option value="GZ">广州</option>
            </select>
        </div>
        <div>
            <button @click='submit'>点击提交</button>
        </div>
    </div>
   
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                userinfo:{
                    name:'',
                    pwd:'',
                    sex:'male',
                    hobby:['敲代码','玩游戏'],
                    province:'HN'
                }
            },
            methods: {
                submit(){
                    console.log(this.userinfo);
                }
            },
        })
    </script>
</body>

</html>